/**  
 * * map 用到的属性 
 * @param width map宽度 
 * @param height map高度 
 * @param latitude 中心纬度 
 * @param longitude 中心经度 
 * @param scale 缩放级别，取值范围为5-18 
 * @param markers
 * * 标记点 
 * @param show-location 显示带有方向的当前定位点 
 * @param markertap 点击标记点时触发 :markers="markers" 
**/
<template>
	<mi-loading ref="Loading" title="加载中..." hasMask="true" v-if="loading"></mi-loading>
	<view v-else>
		<qiao-address :letter="'A'" @confirm="confrim"></qiao-address>
<!-- 		<view class="page-body">
			<view class="page-section page-section-gap">
				<map
					style="width: 100%; height: 600rpx;"
					:latitude="latitude"
					:longitude="longitude"
					scale="16"
					show-location="true"
					@markertap="markertap"
				></map>
			</view>
		</view> -->
		<!-- 地图 -->
<!-- 		<view class="charts-box">
		  <qiun-data-charts
		    type="map"
		    :opts="{extra:{map:{mercator:true}}}" 
			:chartData="chartsDataMap1"
		    :canvas2d="true"
		    background="none"
		    :tooltipCustom="tooltipCustom"
		  />
		</view> -->
		<view>
			<button class="btn" @tap="getUserMap">
				<text>获取当前位置</text>
			</button>
		</view>
	</view>
</template>

<script>
	import amap from '@/common/SDK/amap-wx.js';
	import mapdata from '@/mockdata/mapdata.json';
	// 加载动画
	import miLoading from '../../components/mi-loading/mi-loading.vue'
	
	export default {
		components: {
			miLoading
		},
		data() {
			return {
				loading: true,
				// 地图数据
				chartsDataMap1:{
					series: mapdata.features,
				},
				headerPosition:"fixed",
				markers: [{}, {}, {}],
				poisdatas: [{}, {}, {}],
				title: 'map',
				key: '6a8085d8c0a6cec0c2e7a6fbac0ea035', // 高德地图KEY
				latitude: 11,
				longitude: 113,
				city: '' //当前位置
			};
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			var that = this;
			uni.getLocation({
				type: 'wgs84',//wgs84 地球坐标 (WGS84)  火星坐标 (GCJ-02)也叫国测局坐标系
				success: function(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.getMap()
				}
			});
			setTimeout(()=>{
				that.loading = false;
			},1000);
		},

		methods: {
			getMap() {
				var amapPlugin = new amap.AMapWX({
					key: this.key
				});
				var that = this;
				amapPlugin.getPoiAround({
					success: function(data) {
						//成功回调
						that.markers = data.markers;
						that.poisdatas = data.poisData;
						var markers_new = [];
						that.markers.forEach(function(item, index) {
							markers_new.push({
								id: item.id, //marker 序号
								width: item.width, //marker 宽度
								height: item.height, //marker 高度
								iconPath: '../../static/img/dingwei.png',// 图标路径
								latitude: item.latitude, //marker  纬度
								longitude: item.longitude, //marker 经度 //自定义标记点上方的气泡窗口
								callout: {
									padding: 2, //callout 文本边缘留白
									fontSize: 15, //callout  文字大小
									bgColor: 'blue', //callout 背景颜色
									color: '#6B8E23', //callout 文字颜色
									borderRadius: 5, //边框圆角
									display: 'BYCLICK', //callout 'BYCLICK':点击显示; 'ALWAYS':常显
									content: that.poisdatas[index].name //地理位置名称
								}
							});
						});
						that.markers = markers_new;
						var map = JSON.stringify(that.poisdatas);
						console.log('data', map);
						that.city = that.poisdatas[0].cityname;
						console.log('city', that.poisdatas[0].cityname);
					},
					fail: function(info) {
						//失败回调
						console.log('info', info);
					}
				});
			},
			
			// 获取地理位置
			getUserMap() {
				console.log('city', this.city);
				// $emit 触发事件  （携带参数的名称，参数内容）
				if(this.city == ''){
					uni.showToast({
						title: '请打开地图定位',
						icon:"loading",
					});
				}else{
					uni.$emit('city', this.city)
				}
				setTimeout(() => {
					uni.navigateBack({
						delta:1
					});
				}, 200)

			},
			
			// 点击选择
			confrim(e){
				uni.$emit('city', e.name)
				setTimeout(() => {
					uni.navigateBack({
						delta:1
					});
				}, 200)
			}
		}
	};
</script>

<style>
	.page-body{
		
	}
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box{
		margin-top: 20upx;
		width: 100%;
		height:300px;
	}
	.btn{
		color: #fff;
		width: 92%;
		height: 90upx;
		border-radius: 50upx;
		background-color: #3E8BC7;
		border: solid 2upx #3E8BC7;
		font-size: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 4% 4%;
		/* 相对于卡片在下方 */
		bottom: 25upx;
		position: absolute;
	}
</style>
